<script setup lang="ts">
import { onMounted, reactive, ref } from "vue"
import { GetEmployeeList } from "../../../api/employee"
import { v4 as uuidv4 } from "uuid"
import { ElMessage } from "element-plus"
import { UpdateEmployees } from "../../../api/train"
const emit = defineEmits(["changState"])
// eslint-disable-next-line vue/require-prop-types
const { id } = defineProps(["id"])
onMounted(() => {
  getEmployee()
})

const employeePage = ref({
  pageIndex: 1,
  pageSize: 1000
})

const employeeList = reactive({
  total: 0,
  data: []
})

const getEmployee = async () => {
  const res = await GetEmployeeList(employeePage.value)
  console.log(res)
  employeeList.total = res.total
  employeeList.data = res.data
}

const select = (value) => {
  const employee = employeeList.data.find((item) => item.employeeId == value.employeeId)
  if (employee.selected) {
    employee.selected = false
  } else {
    employee.selected = true
  }
}

const temporaryModal = ref(false)
const openTemporary = () => {
  temporaryModal.value = true
}
const closeTemporaryModal = () => {
  temporaryModal.value = false
}
const addTemporary = () => {
  employeeList.data.push({
    employeeId: uuidv4(),
    name: form.value.name,
    position: form.value.position,
    temporary: true,
    selected: true
  })
  form.value.name = ""
  form.value.position = ""
  temporaryModal.value = false
}
const form = ref({
  name: "",
  position: ""
})
const submitEmployee = () => {
  const list = employeeList.data.filter((item) => item.selected)
  if (list.length <= 1) {
    ElMessage.error("培训人员至少两人")
  } else {
    UpdateEmployees({
      trainId: id,
      employees: JSON.stringify(employeeList.data)
    }).then((res) => {
      if (res.ret) {
        emit("changState", {
          state: 2
        })
      }
    })
  }
}
</script>

<template>
  <div class="w-full h-full">
    <el-container class="h-full">
      <el-header height="10%">
        <div class="title">选择本次培训参加人员</div>
      </el-header>
      <el-main>
        <div class="flex">
          <div
            v-for="(value, index) in employeeList.data"
            :key="index"
            :class="
              value.selected
                ? 'flex justify-center items-start w-[100px] flex-col m-1 border-2 border-amber-500'
                : 'flex justify-center items-start w-[100px] flex-col m-1'
            "
            @click="select(value)"
          >
            <img
              v-if="value.photo"
              width="100px"
              :src="'http://192.168.2.25:5173/' + value.photo"
              alt="avatar"
            />
            <img v-else width="100px" src="../../../assets/image/92.png" alt="avatar" />
            <div>姓名：{{ value.name }}</div>
            <div>岗位：{{ value.position }}</div>
          </div>
        </div>
      </el-main>
      <el-footer height="10%">
        <!--        @click="setState"-->
        <el-button type="primary">返回上一步</el-button>
        <el-button type="primary" @click="openTemporary">添加临时人员</el-button>
        <el-button type="primary" @click="submitEmployee">选择完毕</el-button>
      </el-footer>
    </el-container>
    <el-dialog v-model="temporaryModal" title="Shipping address" width="500">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="岗位">
          <el-input v-model="form.position" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeTemporaryModal">取消</el-button>
          <el-button type="primary" @click="addTemporary"> 添加</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.title {
  width: 100%;
  height: 100%;
  font-size: 30px;
  color: #c2c87a;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
